<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./../jquery-easyui-1.6.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="./../jquery-easyui-1.6.6/themes/icon.css">
    <script type="text/javascript" src="./../jquery-easyui-1.6.6/jquery.min.js"></script>
    <script type="text/javascript" src="./../jquery-easyui-1.6.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="./../js/jquery.serializejson.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2/xheditor-1.2.2.min.js"></script>
    <script type="text/javascript" src="../js/xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>
    <link rel="stylesheet" href="new.css">
</head>

<body>
    <table id="dg"></table>
    <div id="dlg" class="easyui-dialog" title="Update" data-options="closed:true" style="width:900px;height:500px;padding:10px">
        <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
            <input type="hidden" name="_id" />
            <div style="margin-bottom:20px">
                <input class="easyui-textbox title" name="title" label="新闻标题:">
            </div>
            <div style="margin-bottom:20px">
                <select class="easyui-combobox classes" name="cate" label="新闻类别:"><option value="国内">国内</option><option value="国际">国际</option><option value="军事">军事</option><option value="娱乐">娱乐</option><option value="体育">体育</option><option value="社会">社会</option><option value="财经">财经</option><option value="互联网">互联网</option><option value="科技">科技</option></select>
            </div>
            <div style="margin-bottom:20px">
                新闻属性: <input type="checkbox" name="property" value="头条" class="property"> 头条 <input type="checkbox" value="热点" name="property"> 热点
            </div>
            <div class="time" style="margin-bottom:20px">
                <!-- <p class="ti">发布时间:</p> -->
                <input class="easyui-textbox times" name="time" style="color: black;" id="time1" label="发布时间:">
                <!-- <p id="time1" class="times" name="time" style="color: black;"></p> -->
            </div>
            <div style="margin-bottom:20px">
                <span>新闻内容:</span>
                <textarea cols="120" rows="30" name="content" class="details" id="content"></textarea>
            </div>

        </form>
        <div style="text-align:right;margin:10px 0">
            <a href="javascript:void(0)" class="easyui-linkbutton but" onclick="submitForm()" style="width:80px">Submit</a>
            <a href="javascript:void(0)" class="easyui-linkbutton but" onclick="clearForm()" style="width:80px">Clear</a>
        </div>
    </div>
    <script type="text/javascript">
        $(pageInit);

        function pageInit() {
            $('#content').xheditor({
                html5Upload: false,
                upMultiple: '1',

                upLinkUrl: "upload.php",
                upLinkExt: "zip,rar,txt",

                upImgUrl: "uploadFile/Images",
                upImgExt: "jpg,jpeg,gif,png",

                upFlashUrl: "upload.php",
                upFlashExt: "swf",
                upMediaUrl: "upload.php",
                upMediaExt: "wmv,avi,wma,mp3,mid"
            });
        }
    </script>

    <script>
        $('#dg').datagrid({
            url: `${parent.globalUrl}release/list`,
            method: 'post',
            fit: 'true',
            pagination: 'true',
            columns: [
                [{
                    field: 'ck',
                    checkbox: true
                }, {
                    field: 'title',
                    title: '标题',
                    width: 200
                }, {
                    field: 'cate',
                    title: '类别',
                    width: 50
                }, {
                    field: 'property',
                    title: '属性',
                    width: 50
                }, {
                    field: 'time',
                    title: '时间',
                    width: 140
                }, {
                    field: 'content',
                    title: '内容',
                    width: 500
                }, {
                    field: '_id',
                    title: '操作',
                    width: 100,
                    formatter: function(value, row, index) {
                        // console.log(row._id);
                        return `<a href="javascript:editData('${row._id}')">修改</a> <a href="javascript:deleteData('${row._id}')">删除</a>`
                    }
                }]
            ],
            toolbar: [{
                text: 'Add',
                iconCls: 'icon-add',
                handler: function() {
                    $('#dlg').dialog('open');
                }
            }, {
                text: '删除多个',
                iconCls: 'icon-cut',
                handler: function() {
                    //选中的所有对象的id是不是应该形成一个数组
                    deleteRows();

                }

            }]
        });

        function submitForm() {
            $('#ff').form('submit', {
                onSubmit: function() {
                    if ($(this).form('enableValidation').form('validate')) {
                        // 表单验证成功
                        var formData = $('#ff').serializeJSON();
                        console.log(formData);
                        if (formData._id.length > 0) {
                            $.ajax({
                                url: `${parent.globalUrl}release/data/` + formData._id,
                                type: 'put',
                                data: formData
                            }).then(res => {
                                // console.log(res);
                                $('#dlg').dialog('close'); //关闭窗口
                                $('#dg').datagrid('reload'); //刷新页面
                            })
                        } else {
                            delete formData._id;
                            $.ajax({
                                url: `${parent.globalUrl}release/data/`,
                                type: 'post',
                                data: formData
                            }).then(res => {
                                // console.log(res);
                                $('#dlg').dialog('close'); //关闭窗口
                                $('#dg').datagrid('reload'); //刷新页面
                            })
                        }
                    }
                    return false;
                }
            });
        }

        function clearForm() {
            $('#ff').form('clear');
        }

        function editData(id) {
            // console.log(id);
            $('#ff').form('load', `${parent.globalUrl}release/data/` + id);
            $('#dlg').dialog('open');
        }

        function deleteData(id) {
            $.messager.confirm('提示', '你确认删除该数据?', function(r) {
                if (r) {
                    $.ajax({
                        url: `${parent.globalUrl}release/data/` + id,
                        type: 'delete'
                    }).then(res => {
                        $('#dg').datagrid('reload');
                    })
                }
            });
        }

        function deleteRows() {
            $.messager.confirm('提示', '你确认删除该数据?', function(r) {
                if (r) {
                    var selections = $('#dg').datagrid('getSelections');
                    if (selections.length > 0) {
                        var ids = [];
                        for (let i = 0; i < selections.length; i++) {
                            ids.push(selections[i]._id);
                        }
                        $.ajax({
                            url: `${parent.globalUrl}release/data/removes`,
                            type: 'post',
                            data: {
                                ids: ids.toString()
                            }
                        }).then(res => {
                            $('#dg').datagrid('reload');
                        })
                    }
                }
            });
        }
    </script>
</body>

</html>